<template>
  <!-- 页面布局盒子 -->
  <div class="home_box">
    <!-- 文章左侧盒子 -->
    <div class="home_left_boxs">
      <!-- 归档标题 -->
      <a-card>
        <div class="guidang_header">
          <h2><strong>归档</strong></h2>
          <p>共计 <strong>{{ articleTatol }}</strong> 篇</p>
        </div>
      </a-card>
      <a-card>
          <div v-for="(item,index) in itemlists" :key="index">
           <h2 class="gd_year">{{ index }}</h2>
           <div v-for="(val,ind) in item" :key="ind">
              <h3 class="gd_month">{{ ind }}</h3>
              <div class="gd_date" v-for="(v,i) in val" :key="i"  @click="()=>toarchdetail(v.id)">
                  {{ v.dateday }} · {{ v.title }}
              </div>
           </div>
          </div>
      </a-card>
    </div>

    <div class="home_right_boxs">
      <a-card title="推荐阅读" style="width: 300px">
        <div class="right_overf">
          <div class="recommend_text" v-for="item in recommendList" :key="item.id"  @click="()=>toarchdetail(item.id)">
            {{ item.title }} · {{ Math.abs(dayjs().diff(dayjs(item.createAt), 'day')) }}天前
          </div>
        </div>
      </a-card>
      <br />
      <a-card title="文章分类" style="width: 300px">
        <div class="right_tag">
          <div v-for="item in CategoryLists" :key="item.id" 
            @click="()=>handeltodetail(item.id)"
          >
            <small>{{ item.label }}</small>
            <span>共计{{ item.articleCount }}篇文章</span>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<!-- -->
<script setup lang="ts">
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import { ref, computed, onMounted, getCurrentInstance, ComponentInternalInstance, watch } from "vue";
//引入日期转换装置
import dayjs from 'dayjs'
//引入pinia
import { storeToRefs } from "pinia";
import { useHomes } from "../store/home";
import Articleitem from "../components/articleitem.vue"
import {useRouter} from "vue-router"
let router = useRouter()
//跳转详情页
let toarchdetail = (id:any) =>{
    // console.log(id)
    router.push("/archives/"+id)
}

const homes = useHomes()
let recommendList = ref([] as any);
let CategoryLists = ref([] as any);
let itemlist = ref([] as any);
let itemlists = ref([] as any);

let { articleList, tagList, swiperList, CategoryList, articleListall, articleTatol } = storeToRefs(homes)
//获取所有文章
const { proxy } = getCurrentInstance() as ComponentInternalInstance
homes.getArtitemall()
homes.getArticle()
//获取所有分类
homes.getcategory()
//获取所有标签
homes.gettags()
// console.log(new Date().toLocaleString('en-US',{ month: 'long' }) ,"time")
watch(articleListall, (newval) => {

  newval.slice(0, 6).forEach((item: any, index: number) => {
    setTimeout(() => {
      recommendList.value.push(item)
      proxy!.$forceUpdate() // 通知 Vue 强制更新视图
    }, index * 300);
  })

  // console.log(newval, "newval ")
  let boling = (n: number) => {
    return n < 10 ? '0' + n : n
  }
  itemlist.value = newval.map((val: any) => {
    // {{new Date(item.publishAt).toLocaleString('en-US',{ month: 'long' }) }}
    val.year = new Date(val.publishAt).getFullYear()
    val.month = new Date(val.publishAt).toLocaleString('en-US', { month: 'long' })
    val.dateday = boling(new Date(val.publishAt).getMonth() + 1) + "-" + boling(new Date(val.publishAt).getDate())
    return val
  })

  // console.log(itemlist.value, "haiahiah1")

  let funb = (itemlist:any) =>{
    const months = [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December',
    ];
    const ret = {} as any;
    itemlist.map((d:any,i:number) => {
      const year = new Date(d.publishAt).getFullYear();
      const month = new Date(d.publishAt).getMonth();
      if (!ret[year]) {
        ret[year] = {};
      }
      // console.log(ret[year],"year")
      if (!ret[year][months[month]]) {
        ret[year][months[month]] = [];
      }
      ret[year][months[month]].push(d);
    });
      // console.log(ret,"ret")
      itemlists.value = ret
  }
funb(itemlist.value)
})

watch(CategoryList, (newval) => {
  newval.forEach((item: any, index: number) => {
    setTimeout(() => {
      CategoryLists.value.push(item)
      proxy!.$forceUpdate() // 通知 Vue 强制更新视图
    }, index * 300);
  })
})

//跳转指定详情页
const handeltodetail = (id:string) =>{
  router.push("/archives/" + id)
}

</script>

<style lang="scss">

.gd_year{
  margin: 5px;
  font-weight: bold;
}
.gd_month{
  margin: 5px 10px;
}
.gd_date{
  margin: 5px 0;
  height: 36px;
  line-height: 36px;
  margin-left: 15px;
  cursor: pointer;
}
strong {
  color: pink;
}
.gd_date:hover{
  color: pink;
  font-size: 16px;
}
.guidang_header {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.home_box {
  height: 100vh;
  margin: 0 auto;
  overflow: auto;
  display: flex;
  justify-content: center;
  background: #f0f2f5;

  .home_left_boxs {
    flex: 1;
    min-width: 500px;
    max-width: 900px;
    margin-right: 15px;
    background: none;

  }

  .home_right_boxs {
    width: 320px;
    height: 100vh;
    background: none;
    position: sticky;
    top: 0;
    right: 0;

    .right_overf {
      width: 100%;
      overflow: hidden;
    }

    .recommend_text {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 6px 0;
      animation: textrightx 0.3s;
      cursor: pointer;

      &:hover {
        color: pink;
      }
    }
  }

  &::-webkit-scrollbar {
    display: none;
  }
}


//隐藏滚动条
html::-webkit-scrollbar {
  display: none;
}

.right_tag {
  width: 100%;
  overflow: hidden;

  div {
    width: 100%;
    padding: 3px 10px;
    margin: 5px;
    display: flex;
    justify-content: space-between;

    small {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    span {
      width: 40%;
      flex-shrink: 0;
    }

    animation: textrightx 0.3s;
    cursor: pointer;

    &:hover {
      color: pink;
    }
  }
}

@keyframes textrightx {
  0% {
    transform: translate(-100%);
  }

  100% {
    transform: translate(0);
  }
}
</style>